<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:include="inc/home::header">
</head>
<link type="text/css" th:href="@{/css/content.css}" rel="stylesheet" />
<body>
	<!--返回-->
	<div class="back"   onclick="loadPage('/user')">
		<img src="images/back.png" />
	</div>
	<div class="head-top">
		<div th:include="header :: header"></div>
	</div>
	<div class="header-title">
		<span th:text="${title}">添加用户</span>
	</div>
	<div class="spare-a">
		<div class="save-bg">
			<a href="#" class="spare-tj" onclick="Save()">保 存</a>
		</div>

		<div class="spare-add">
			<form id="userForm">

				<input type="text" readonly="readonly" style="display: none"
					name="id" /> <input type="text" readonly="readonly"
					style="display: none" name="roleName" />
				<ul>

					
					
							<li>
						<div class="spare-addl"><span class="star">*</span>用户名称：</div>
						<div class="spare-addr">
							<input type="text" class="spare-add-input" placeholder="输入用户名称"  id="userName" name="userName"/>
						</div>
					</li>
					
					<li>
						<div class="spare-addl">
							<span class="star">*</span>用户角色：
						</div>
						<div class="spare-addr">
							<select class="spare-add-select" name="roleId" id="mySelect">
									 <option>请选择</option>
							</select>
							<div class="select-arrow"></div>
						</div>
					</li>
					<li>
						<div class="spare-addl">备注：</div>
						<div class="spare-addr">
							<textarea class="spare-add-textarea" name="userRemark"></textarea>
						</div>
					</li>
				</ul>
			</form>
		</div>

	</div>
</body>
<script th:inline="javascript">  
/*<![CDATA[*/  
  function verifyNull(obj){
	
		if(obj == null||obj.val()==""||obj.val()=="请选择"){
			top.$.Zebra_Dialog('<div class="prompt"><div class="warning-icon"></div><div class="success-title">输入的内容不能包含空</div></div>', {
				'title':'提示',
	 	         'buttons':['确定']
		     });
			return false;
		}
	return true;
}      
 function getData(){
	if(!verifyNull($("#mySelect"))||!verifyNull($("#userName"))){
 		return false;
 	}
	return true;
 }
    

 function Save(){
		var validate=getData();
		  if(!validate){
			 return false;
		 }
		  
		  
		  
		  var text = $("#userName").val();
		  var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？%]");
		  var result = text.match(pattern);
		  if (!result)
		  {
		  }else{
				top.$.Zebra_Dialog('<div class="prompt"><div class="warning-icon"></div><div class="success-title">含有特殊字符</div></div>', {
					'title':'提示',
		 	         'buttons':['确定']
			     });
				return
		  }

	   var data= getDataJson("userForm");

	   var obj = JSON.stringify(data);
      AjaxWebTableInfo("/User/saveOrUpdate",data);
	 }
	      
	function AjaxWebTableInfo(url , obj){
		 $.ajax({
		     type: "post",
		     dataType: "json",
		     url: url,
		     data:obj,
		     success: function (data, status) {
		    	 if(data==null){
		    			$.Zebra_Dialog(
								'<div class="prompt"><div class="success-icon"></div><div class="success-title">存在此用户</div></div>',
								{
									'title' : '提示',
									'show_close_button' : false,
									'buttons' : [ {
										caption : '确定',
										callback : function() {
												loadPage("/user");
											
										}
									} ]
								});
		    	 }else{
		    		 
		    			$.Zebra_Dialog(
								'<div class="prompt"><div class="success-icon"></div><div class="success-title">保存成功</div></div>',
								{
									'title' : '提示',
									'show_close_button' : false,
									'buttons' : [ {
										caption : '确定',
										callback : function() {
												loadPage("/user");
											
										}
									} ]
								});
		    		 
		    	 }
		    	 	
		     },
		     error: function (data) {
		    	 $.Zebra_Dialog('<div class="prompt"><div class="error-icon"></div><div class="success-title">保存失败!</div></div>', {
			            'title':'提示',
			            'buttons':['确定']
			         });
		     }
		 });	
	}

 
 
 
 
 
 
 
//加载角色
$(function() { 
$.ajax({
    type: 'GET',
    url: '/Role/Roles?timestamp='+new Date().getTime(),
    success: function (data) {
        var data = eval(data);
        var proOPts = "";
        $.each(data, function (i) {
        	if(data[i].roleName!="超级管理员"){
        		 proOPts += "<option value='" + data[i].id+ "'>" + data[i].roleName + "</option>";
        	}
           
        });
        $("#mySelect").append(proOPts);
        var user = [[${user}]];  
        if(user!=null){
            loadData(user);
        }
    }
}); 
});

  
    
/*]]>*/  
</script>

<script language="javascript" type="text/javascript">  
$(function() { 
$('#mySelect').change(function(){  
$("input[name='roleName']").val($(this).children('option:selected').text());
}); 
});
</script>
</html>
